
<script lang="ts" setup>
    import { ArrowLeft } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'

    const router = useRouter()
    const props = defineProps({
        navname:{
            type: String,
        },
        navshow:{
          type: Boolean,
          default: false,
        },
    });
    const goBack = () => {
      router.go(-1);
    }
</script>

<template>
  <section class="nav-box flex items-center py-1.5 w-full" :class="[{'nav-show':props.navshow},{'bgk-color':props.navname=='首页'}]">
      <div class="pl-2" @click="goBack" :class="{'hidden':props.navname=='首页'}">
          <el-icon :size="20" color="#FFFFFF" class="h-7"><ArrowLeft /></el-icon>
      </div>
      <div class="nav-title flex h-full justify-center text-lg"><span>{{ props.navname }}</span></div>
  </section>
</template>

<style scoped>
.nav-box{
  background-color: #3259ce;
  z-index: 999;
}
.bgk-color{
  background-color: #3694DC !important;
  /* background: linear-gradient(180deg,#3694DC 0%,rgba(21,154,229,0) 100%); */
}
.nav-show{
  position: fixed;
  top: 0;
}
.nav-title{
  flex: 1;
  color: #FFFFFF;
}
.hidden{
  display: none;
}
</style>